<template>
  <div class="message-list">
    <MessageItem 
      v-for="(message, index) in messages" 
      :key="index" 
      :message="message" 
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import MessageItem from './MessageItem.vue'

// 模拟聊天消息
const messages = ref([
  {
    id: 1,
    text: '你好！我是AI助手，有什么可以帮您的吗？',
    sender: 'ai',
    timestamp: new Date(),
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
  },
  {
    id: 2,
    text: '我想了解如何提高前端开发效率',
    sender: 'user',
    timestamp: new Date(),
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48276968aec4c6d3apng.png'
  },
  {
    id: 3,
    text: '提高前端开发效率可以从以下几个方面入手：\n1. 使用现代化的框架和工具（如Vue、React）\n2. 组件化开发，提高代码复用率\n3. 使用代码规范和自动化工具\n4. 持续学习和实践新技术',
    sender: 'ai',
    timestamp: new Date(),
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
  }
])
</script>

<style lang="scss" scoped>
.message-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 20px;
}
</style>